<template>
  <div ref="myChart" style="width: 100%;height: 100%"></div>
</template>
<script>

  export default {
    name: "ZVeRing",
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    created() {
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(this.$refs.myChart)
        // 绘制图表
        myChart.setOption({
          grid: {top: '0%'},
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: 5,
          },
          color:['#8693f3', '#bc8cef', '#ffa897','#8ac3f8', '#6dd5de'],
          series: [
            {
              name: '项目阶段',
              type: 'pie',
              center: ['50%', '40%'],
              radius: ['35%', '60%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: 1048, name: '准备阶段'},
                {value: 735, name: '实施阶段'},
                {value: 580, name: '报告阶段'},
                {value: 300, name: '归档阶段'},
                {value: 484, name: '整改阶段'},
              ]
            },
          ]
        });
      }
    }
  }
</script>

<style scoped>

</style>